<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材管理 - 睿途教育</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="dashboard/data-overview.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-list mr-2"></i> 教材列表
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">教材管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">教材列表</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">教材列表</h2>
                <p class="text-gray-500 mt-1">管理系统中的所有教材信息，包括新增、编辑和删除教材</p>
            </div>

            <!-- 工具栏 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex flex-wrap gap-2">
                        <button id="addTextbookBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                            <i class="fa fa-plus mr-2"></i> 新增教材
                        </button>
                        <div class="relative group">
                            <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors flex items-center">
                                <i class="fa fa-filter mr-2"></i> 筛选
                                <i class="fa fa-angle-down ml-1"></i>
                            </button>
                            <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
                                <div class="py-2">
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                        <i class="fa fa-check-circle mr-2"></i> 全部教材
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                        <i class="fa fa-graduation-cap mr-2"></i> 小学教材
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                        <i class="fa fa-graduation-cap mr-2"></i> 初中教材
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                        <i class="fa fa-graduation-cap mr-2"></i> 高中教材
                                    </a>
                                </div>
                            </div>
                        </div>
                        <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors flex items-center">
                            <i class="fa fa-refresh mr-2"></i> 刷新
                        </button>
                        <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors flex items-center">
                            <i class="fa fa-download mr-2"></i> 导出
                        </button>
                    </div>
                    
                    <div class="relative">
                        <select class="pl-4 pr-10 py-2 bg-gray-100 border-0 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all appearance-none">
                            <option>按创建时间排序</option>
                            <option>按教材名称排序</option>
                            <option>按学科排序</option>
                            <option>按适用年级排序</option>
                        </select>
                        <i class="fa fa-angle-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
            </div>

            <!-- 教材列表 -->
            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 font-medium text-gray-600 w-12">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary/20">
                                </th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">教材名称</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">学科</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">适用年级</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">章节数量</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">创建人</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">创建时间</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">状态</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 教材1 -->
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary/20">
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/24/60/80" alt="数学教材封面" class="w-12 h-16 object-cover rounded mr-3">
                                        <div>
                                            <div class="font-medium text-gray-800">高中数学必修一</div>
                                            <div class="text-xs text-gray-500 mt-1">人民教育出版社</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">数学</td>
                                <td class="py-3 px-4 text-gray-600">高一</td>
                                <td class="py-3 px-4 text-gray-600">8</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                        <span>李老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">2023-09-01</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">已启用</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex space-x-2">
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="编辑教材">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="章节管理">
                                            <i class="fa fa-sitemap"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-danger transition-colors" title="删除教材">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 教材2 -->
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary/20">
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/20/60/80" alt="语文教材封面" class="w-12 h-16 object-cover rounded mr-3">
                                        <div>
                                            <div class="font-medium text-gray-800">初中语文上册</div>
                                            <div class="text-xs text-gray-500 mt-1">人民教育出版社</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">语文</td>
                                <td class="py-3 px-4 text-gray-600">初一</td>
                                <td class="py-3 px-4 text-gray-600">6</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/2/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                        <span>王老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">2023-08-15</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">已启用</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex space-x-2">
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="编辑教材">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="章节管理">
                                            <i class="fa fa-sitemap"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-danger transition-colors" title="删除教材">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 教材3 -->
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary/20">
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/42/60/80" alt="英语教材封面" class="w-12 h-16 object-cover rounded mr-3">
                                        <div>
                                            <div class="font-medium text-gray-800">高中英语必修二</div>
                                            <div class="text-xs text-gray-500 mt-1">外语教学与研究出版社</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">英语</td>
                                <td class="py-3 px-4 text-gray-600">高二</td>
                                <td class="py-3 px-4 text-gray-600">10</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/3/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                        <span>张老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">2023-09-10</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">已启用</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex space-x-2">
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="编辑教材">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="章节管理">
                                            <i class="fa fa-sitemap"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-danger transition-colors" title="删除教材">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 教材4 -->
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary/20">
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/96/60/80" alt="物理教材封面" class="w-12 h-16 object-cover rounded mr-3">
                                        <div>
                                            <div class="font-medium text-gray-800">初中物理全一册</div>
                                            <div class="text-xs text-gray-500 mt-1">人民教育出版社</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">物理</td>
                                <td class="py-3 px-4 text-gray-600">初二、初三</td>
                                <td class="py-3 px-4 text-gray-600">12</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/4/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                        <span>陈老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">2023-07-22</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-full">已禁用</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex space-x-2">
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="编辑教材">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="章节管理">
                                            <i class="fa fa-sitemap"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-danger transition-colors" title="删除教材">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 教材5 -->
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary/20">
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/119/60/80" alt="历史教材封面" class="w-12 h-16 object-cover rounded mr-3">
                                        <div>
                                            <div class="font-medium text-gray-800">高中历史必修一</div>
                                            <div class="text-xs text-gray-500 mt-1">人民教育出版社</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">历史</td>
                                <td class="py-3 px-4 text-gray-600">高一</td>
                                <td class="py-3 px-4 text-gray-600">7</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/5/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                        <span>刘老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">2023-09-05</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">已启用</span>
                                </td>
                                <td class="py-3 px-4">
                                    <div class="flex space-x-2">
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="编辑教材">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-primary transition-colors" title="章节管理">
                                            <i class="fa fa-sitemap"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-danger transition-colors" title="删除教材">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="flex flex-col md:flex-row justify-between items-center mt-6">
                    <div class="text-sm text-gray-500 mb-4 md:mb-0">
                        显示 1 到 5 条，共 28 条记录
                    </div>
                    <div class="flex space-x-1">
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 text-gray-400 bg-gray-50 cursor-not-allowed">
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">
                            1
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                            2
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                            3
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                            4
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                            5
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 教材统计 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 学科分布 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">教材学科分布</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-primary rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">数学</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-primary h-2 rounded-full" style="width: 30%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">8</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-success rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">语文</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-success h-2 rounded-full" style="width: 25%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">7</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-warning rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">英语</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-warning h-2 rounded-full" style="width: 20%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">6</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-danger rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">其他</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-danger h-2 rounded-full" style="width: 25%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">7</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 年级分布 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">教材年级分布</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-primary rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">小学</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-primary h-2 rounded-full" style="width: 20%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">5</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-success rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">初中</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-success h-2 rounded-full" style="width: 40%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">11</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-warning rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">高中</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-warning h-2 rounded-full" style="width: 40%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">12</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 状态统计 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">教材状态统计</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-gray-50 rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-success mb-1">23</div>
                            <div class="text-sm text-gray-600">已启用</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-gray-400 mb-1">5</div>
                            <div class="text-sm text-gray-600">已禁用</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-primary mb-1">28</div>
                            <div class="text-sm text-gray-600">总计</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-warning mb-1">126</div>
                            <div class="text-sm text-gray-600">总章节数</div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4 mt-6">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 新增教材模态框 (默认隐藏) -->
    <div id="addTextbookModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-lg mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-800">新增教材</h3>
                    <button id="closeModal" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">教材名称 <span class="text-danger">*</span></label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="请输入教材名称" required>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">学科 <span class="text-danger">*</span></label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" required>
                                <option value="">请选择学科</option>
                                <option value="math">数学</option>
                                <option value="chinese">语文</option>
                                <option value="english">英语</option>
                                <option value="physics">物理</option>
                                <option value="chemistry">化学</option>
                                <option value="biology">生物</option>
                                <option value="history">历史</option>
                                <option value="geography">地理</option>
                                <option value="politics">政治</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">适用年级 <span class="text-danger">*</span></label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" required>
                                <option value="">请选择适用年级</option>
                                <option value="1">一年级</option>
                                <option value="2">二年级</option>
                                <option value="3">三年级</option>
                                <option value="4">四年级</option>
                                <option value="5">五年级</option>
                                <option value="6">六年级</option>
                                <option value="7">初一</option>
                                <option value="8">初二</option>
                                <option value="9">初三</option>
                                <option value="10">高一</option>
                                <option value="11">高二</option>
                                <option value="12">高三</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">出版社</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="请输入出版社名称">
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">教材封面</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                            <div class="space-y-1 text-center">
                                <i class="fa fa-cloud-upload text-gray-400 text-3xl mb-2"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
                                        <span>上传图片</span>
                                        <input id="file-upload" name="file-upload" type="file" class="sr-only">
                                    </label>
                                    <p class="pl-1">或拖放文件</p>
                                </div>
                                <p class="text-xs text-gray-500">支持 PNG, JPG, GIF 格式，最大 5MB</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">教材描述</label>
                        <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" rows="3" placeholder="请输入教材描述（可选）"></textarea>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex items-center space-x-4">
                            <label class="inline-flex items-center">
                                <input type="radio" name="status" value="enabled" checked class="text-primary focus:ring-primary/20">
                                <span class="ml-2 text-sm text-gray-700">启用</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="status" value="disabled" class="text-primary focus:ring-primary/20">
                                <span class="ml-2 text-sm text-gray-700">禁用</span>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="p-4 bg-gray-50 rounded-b-lg flex justify-end space-x-3">
                <button id="cancelAdd" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition-colors">取消</button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">保存教材</button>
            </div>
        </div>
    </div>

    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 模态框相关操作
            const addTextbookBtn = document.getElementById('addTextbookBtn');
            const addTextbookModal = document.getElementById('addTextbookModal');
            const modalContent = document.getElementById('modalContent');
            const closeModal = document.getElementById('closeModal');
            const cancelAdd = document.getElementById('cancelAdd');

            // 打开模态框
            addTextbookBtn.addEventListener('click', function() {
                addTextbookModal.classList.remove('hidden');
                addTextbookModal.classList.add('flex');
                // 触发动画
                setTimeout(() => {
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 10);
                // 防止背景滚动
                document.body.style.overflow = 'hidden';
            });

            // 关闭模态框
            function hideModal() {
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
                // 触发动画后隐藏
                setTimeout(() => {
                    addTextbookModal.classList.remove('flex');
                    addTextbookModal.classList.add('hidden');
                    document.body.style.overflow = '';
                }, 300);
            }

            closeModal.addEventListener('click', hideModal);
            cancelAdd.addEventListener('click', hideModal);
            
            // 点击模态框外部关闭
            addTextbookModal.addEventListener('click', function(e) {
                if (e.target === addTextbookModal) {
                    hideModal();
                }
            });

            // 导航栏滚动效果
            const header = document.querySelector('header');
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                    header.classList.remove('shadow-sm');
                } else {
                    header.classList.remove('shadow-md');
                    header.classList.add('shadow-sm');
                }
            });
        });
    </script>
</body>

</html>